<template>
	<view>
		<view class="reset">
			<view class="list">
				<text>手机号码</text>
				<view class="input">
					{{mobile.substr(0,3) + "****" + mobile.substr(7)}}
				</view>
				<button @click="getCode" :disabled="flag">{{sendCodeText}}</button>
			</view>
			<view class="list">
				<text>验证码</text>
				<input class="input" type="text" v-model="code" placeholder="请输入验证码">
			</view>

			<button class="btn" @click="submit">确认</button>
		</view>

		<u-modal v-model="show" :title-style="{color: 'red'}"
			confirm-text="确认注销"
			cancel-text="再想想"
			confirm-color="red"
			show-cancel-button
			@confirm="toCancel"
		>
			<view class="slot-content">
				<view class="text flex_r_around">
					<text>请确定您已经阅读并同意<i @click="toRich">《用户注销协议》</i></text>
				</view>
			</view>
		</u-modal>
		
		<view class="slider flex_r_around" v-if="slider_show">
			<view class="block flex_c">
				<view class="title">
					拖动下方滑块完成验证
					<uni-icons type="close" color="#FFF" @click="slider_show = false"></uni-icons>
				</view>
				<view class="box flex_r_around">
					<liu-slider-verify ref="verify" @change="slideerChange"></liu-slider-verify>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	let Base64 = require('js-base64').Base64
	export default {
		data() {
			return {
				mobile: '',
				code: '',


				sendCodeText: '获取验证码',
				flag: false,
				i: 60,

				content: '',

				show: false,
				
				slider_show:false,
			}
		},
		methods: {
			slideerChange(e){
				let that = this
				if(e.state){
					that.request.httpTokenRequest({
						url: "/index/getCode",
						method: "post"
					}, {}).then(data => {
						if (data.code == 0) {
							let code = Base64.decode(data.data.token)
							that.isSend = true
							this.request.httpTokenRequest({
								url: "index/sendSms",
								method: "post"
							}, {
								scene: '107',
								mobile: this.mobile,
								code:code
							}).then(res => {
								this.slider_show = false
								if (res.code == 0) {
									this.flag = true
									let timer = setInterval(() => {
										this.sendCodeText = `已发送(${this.i})`
										this.i--
										if (this.i <= 0) {
											this.flag = false
											this.i = 60
											this.sendCodeText = `重新获取`
											clearInterval(timer)
										}
									}, 1000)
								} else {
									this.$util.msg(res.msg)
								}
							}, error => {})
						}
					}, error => {})
				}
				
			},
			getCode() {
				this.slider_show = true
			},
			submit() {
				if(!this.code){
					return this.$util.msg('请输入验证码')
				}
				this.show = true;
			},
			toRich() {
				uni.navigateTo({
					url: '/otherpages/setting/policy/detail?type=logout'
				})
			},
			toCancel() {
				this.request.httpTokenRequest({
					url: "user/cancel",
					method: "post",
				}, {
					code:this.code
				}).then(res => {
					this.$util.msg(res.msg)
					if (res.code == 0) {
						uni.clearStorageSync()
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				}, error => {})
			},
		},
		onLoad() {
			this.mobile = uni.getStorageSync('user').mobile
		}
	}
</script>

<style lang="scss" scoped>
	.text {
		padding: 40rpx 20rpx;
		text {
			font-size: 26rpx;
			color: #08090A;
			line-height: 37rpx;
			text-align: center;
			i {
				color: #046CC3;
				font-style: normal;
			}
		}
	}

	.reset {
		background: #F5F7F8;
		min-height: 100vh;
	}

	.list {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 10rpx 30rpx;
		background: #FFF;
		border-bottom: 1rpx solid #C6C6C6;

		text {
			width: 240rpx;
			font-size: 30rpx;
			color: #0F0807;
			line-height: 42rpx;
			margin-right: 20rpx;
		}

		.input {
			color: #0F0807;
			font-size: 30rpx;
			flex: 1;
		}

		button {
			width: 160rpx;
			height: 70rpx;
			border-radius: 44rpx;
			border: 1rpx solid #EF5233;
			font-size: 22rpx;
			color: #EF5233;
			line-height: 70rpx;
			padding: 0;
			background: #FFF;
		}
		button::after {
			border: 0;
		}
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: #EF5233;
		border-radius: 44rpx;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		margin-top: 30rpx;
	}

	.slider {
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, .6);
		z-index: 99;
		padding-bottom: 30%;
		
		.block {
			width: 80%;
			background: #FFF;
			border-radius: 26rpx;
			.title {
				width: 100%;
				height: 72rpx;
				background: #3393FF;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
				position: relative;
				text {
					position: absolute;
					top: 0;
					right: 10rpx;
				}
			}
			.box {
				flex: 1;
				width: 100%;
				padding: 60rpx 20rpx;
			}
		}
	}

</style>